<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .mybody {
            width: 1024px;
            height: 768px;
            margin: 0px auto;
        }

        .header {
            width: 1024px;
            height: 50px;
        }

        .baseMain {
            width: 1024px;
            height: auto;
            margin: 0px auto;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="js/util.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body class="mybody">
<div class="header">
    <h1>base</h1>

</div>

<div class="addBaseDiv">
    <form id="addBaseForm">
        仓库名
        <input name="baseName" type="text">
        <button class="btn btn-default'" id="btnAddBaseForm">add</button>
    </form>

</div>
<div class="baseMain">
    <table id="baseTable" class="table table-hover">
        <thead>
        <tr>
            <th>BaseName</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>name1</td>
            <td>
                <button>check</button>
            </td>
            <td>
                <button>delete</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="itemMain">
    <table id="itemsTable" class="table table-hover">
        <thead>
        <tr>
            <th>ItemName</th>
            <th>ItemNum</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr>

        </tr>
        </tbody>
    </table>
</div>

</body>
<script>
    $(function () {
        updateBase();
    })

    function updateBase() {
        myAjax("http://localhost:8999/base/list", "get", null, renderBase);
    }

    function updateItem() {
        myAjax("http://localhost:8999/item/list", "get", null, renderItem);
    }

    function deleteBase(bid) {
        myAjax("http://localhost:8999/base/delete/" + bid, "post", null, updateBase)
    }

    function deleteItem(iid) {
        myAjax("http://localhost:8999/item/delete/" + iid, "post", null, updateItem)
    }

    function addItem(bid) {
        $tbody = $("#itemsTable").find("tbody");
    }

    function renderBase(data) {
        $tbody = $("#baseTable").find("tbody");
        $tbody.children().remove();
        data.forEach((base) => {
            let $tr = $("<tr>").append($("<td>").text(base.baseName))
                .append($("<td>").append($("<button class='btn btn-default'>").text("delete").on("click", () => {
                    deleteBase(base.id)
                })));
            $tr.on("dblclick", function () {
                myAjax("http://localhost:8999/item/bid/" + base.id, "get", null, renderItem);
            })
            $tbody.append($tr);
        })
    }

    function renderItem(data) {
        $tbody = $("#itemsTable").find("tbody");
        $tbody.children().remove();
        data.forEach((item) => {
            let $tr = $("<tr>").append($("<td>").text(item.itemName))
                .append($("<td>").text(item.itemNum))
                .append($("<td>").append($("<button class='btn btn-default'>").text("delete").on("click", () => {
                    deleteItem(item.id)
                })));
            $tbody.append($tr);
        })
        let $inputBaseId = $("<input name=\"baseId\" type=\"text\" hidden>")
        let $inputName = $("<input name=\"itemName\" type=\"text\">")
        let $inputNum = $("<input name=\"itemNum\" type=\"number\">")
        let $btn = $("<button class=\"btn btn-default'\" id=\"btnAddItemForm\">add</button>")
        $tbody.append($inputName).append($inputNum).append($btn).append($inputBaseId);
    }

    $("#btnAddBaseForm").on("click", function (e) {
        e.preventDefault();
        let base = {}
        let $inputs = $("#addBaseForm").find("input");
        $.each($inputs, (index, item) => {
            let $item = $(item);
            base[$item.attr("name")] = $item.val();
        })
        console.log(base);
        myAjax("http://localhost:8999/base/add", "post", base, updateBase)
    })
    $("#btnAddItemForm").on("click", function (e) {
        e.preventDefault();
        let base = {}
        let $inputs = $("#addBaseForm").find("input");
        $.each($inputs, (index, item) => {
            let $item = $(item);
            base[$item.attr("name")] = $item.val();
        })
        console.log(base);
        myAjax("http://localhost:8999/item/add", "post", base, updateBase)
    })
</script>
</html>